<template>
    <div>
        <h2 align="center">新增户型</h2>
        <table class="table table-bordered">
            <tbody>

                <tr>
                    <td align="right">所属项目</td>
                    <td><input type="text" v-model="info.Name"/></td>
                </tr>

                <tr>
                    <td align="right">户型名称</td>
                    <td><input type="text" v-model="info.Fname"/></td>
                </tr>

                <tr>
                    <td align="right">户型结构</td>
                    <td>
                        <select v-model="info.Gou">
                            <option value="1">请选择</option>
                            <option>两居室</option>
                            <option>三居室</option>
                            <option>大平层</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right">建筑面积</td>
                    <td><input type="text" v-model="info.Area"/></td>
                </tr>

                <tr>
                    <td align="right">套内面积</td>
                    <td><input type="text" v-model="info.Farea"/></td>
                </tr>

                <tr>
                    <td align="right">户型图</td>
                    <td><input type="file" @change="img"/>
                        <img :src="info.Photo" width="100" height="100" v-if="info.Photo != ''"/>
                    </td>
                </tr>

                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="保存" class="btn btn-info" @click="ok"/>
                    </td>
                </tr>


            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';

let router = useRouter();
let route = useRoute();

let info:any = reactive({
    Name: '',
  Fname: '',
  Gou: 1,
  Area: '',
  Farea: '',
  Photo: ''
})

const img = (e:any)=>{
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file',obj);
    axios({
        url:'https://localhost:7143/api/Img/Imgs',
        method:'post',
        data:f
    })
    .then((res)=>{
        info.Photo = res.data;
    })
    .catch((err)=>{
        console.log(err)
    })
}


const ok = ()=>{
    if(info.Name == "")
    {
        alert('所属项目不能为空');
        return;
    }
    if(info.Fname == "")
    {
        alert('户型名称不能为空');
        return;
    }
    if(info.Gou == "")
    {
        alert('户型结构不能为空');
        return;
    }
    if(info.Area == "")
    {
        alert('建筑面积不能为空');
        return;
    }
    if(info.Farea == "")
    {
        alert('套内面积不能为空');
        return;
    }
    axios({
        url:'https://localhost:7143/api/House/HouseAdd',
        method:'post',
        data:info
    })
    .then((res)=>{
        if(res.data >0)
        {
            alert('添加成功');
            router.push('/show');
            return;
        }
        else if(res.data == -1)
        {
            alert('所属项目重复');
            return;
        }
        else
        {
            alert('添加失败');
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}




</script>

<style scoped>

</style>